<template>
	<view>
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="收藏夹" :autoBack="true">
			<view slot="right">
				<view class="flex">
					<u-icon name="search" style='margin-right: 20rpx;' @click="showTime=!showTime" size="50rpx">
					</u-icon>
					<view @click="showmanger=!showmanger" :class="['fontS32',showmanger?'homeRed':'']">
						{{showmanger?'完成':'编辑'}}
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="paddingLR24" style="background-color: #fff;padding-top:24rpx" v-if="!showTime">
			<u-input prefixIcon="search" prefixIconStyle="color:#999999;" placeholder="搜索商品"
				customStyle="height:88rpx;padding:0rpx 20rpx;background-color: #fff; color:#999999;"
				border="surround" v-model="searchValue" @change="searchChange"  >
			</u-input>
		</view>
		<!-- 收藏时间 -->
		<view class="relative"  style="z-index: 999;border-radius: 0 0 40rpx 40rpx;"
			:style="showTime?'overflow: hidden':''">
			<view class="time   padding32">
				<view class="flex mb24" @click="showTime=!showTime">
					<view class="">收藏时间</view>
					<u-icon :name="!showTime?'arrow-down-fill':'arrow-up-fill'" size="16rpx" color="#333"></u-icon>
				</view>
				<view class="flex" style="flex-wrap: wrap;" v-if="showTime">
					<view class="timelis mb24 co6" @click="activeTimeChange(item.id)"
						:class="activeTime==item.id?'bgcred cof':''" v-for="(item,index) in time" :key="index">
						{{item.name}}
					</view>
				</view>
			</view> 
		</view>
		<view class="lisbox">
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<view class="lis flexJBC" v-for="(item,index) in list" :key="index" @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)" >
					<u-checkbox :customStyle="{marginBottom: '8px'}" :name="item.id" style='margin: 0 16rpx;'
						v-if="showmanger" activeColor="#DD2131">
					</u-checkbox>
					<view class="" style="width: 240rpx;">
						<image :src="item.image"  height="240rpx" style='width: 240rpx;height: 240rpx;border: 10rpx;'>
						</image>
					</view>
					<view  class="lisRight">
						<view>
							<view class="elipes1">
								{{item.product_name}}
							</view>
							<view class="co9 fontS24" style="margin-top: 20rpx;">
								{{item.care_count}}人想买
							</view>
						</view>
						<view class="homeRed" style="margin-top: 28rpx;">
							<text class="fontS24">￥</text>
							<text class="fontS36">{{item.price}}</text>
						</view>
						<view class="flexJBC co9 fontS24">
							<view class="">
								月销{{item.sales}}件
							</view>
							<view class="like" v-if="!showmanger" @click.stop="$my.go('/pages/cart/similarGoods?id='+item.id)">
								找相似
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<!-- 无数据 -->
		<view class="nodeta flexcenter" v-if="list.length==0">
			<image src="/static/images/mine/Group 33238.png" mode="" style="width: 325rpx;height: 200rpx;"></image>
			<view class="">
				暂无收藏
			</view>
		</view>
		<!-- 黑框 -->
		<view class="model" v-if="showTime" @click="showTime=false"></view>
		<view class="bottomBox flexJBC paddingLR32 " v-if="showmanger">
			<u-checkbox-group v-model="isAll" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px'}" label="全选" name="all" style='margin-right:24rpx;'
					activeColor="#DD2131">
				</u-checkbox>
			</u-checkbox-group>
			<view class="btnClick1 homeRed borderred" @click="delet">
				取消收藏{{checkboxValue1.length>0?checkboxValue1.length:''}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchValue:'',//搜索关键字
				activeTime: '', //筛选时间id
				page: 1,
				list: [], //数据列表
				showTime: false, //显示筛选收藏时间
				time: [{
					name: '七天内',
					id: 7
				}, {
					name: '30天内',
					id: 30
				}, {
					name: '90天内',
					id: 90,
				}, {
					name: '半年内',
					id: 180,
				}, {
					name: '半年前',
					id: '-180'
				}],
				showTopRight: false,
				isAll: [], //全选
				checkboxValue1: [], //被多选的列表
				showmanger: false //true为管理页面
			}
		},
		watch: {
			// 监听复选框
			checkboxValue1(newvalue, old) {
				console.log(newvalue.length,this.list.length)
				if (newvalue.length < this.list.length) {
					this.isAll = []
				} else {
					this.isAll = ['all']
				}
			}
		},
		methods: {
			searchChange(e){
				this.list=[];
				this.page=1;
				this.getList()
			},
			delet() {
				// type 1 是店铺 2是商品   is_batch 是否批量
				let _this = this
				if (_this.checkboxValue1.length > 0) {
					uni.showModal({
						title: "",
						content: "确定要取消收藏吗？",
						cancelText: '取消', // 取消按钮的文字   
						confirmText: '确认', // 确认按钮的文字   
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '取消中'
								})
								_this.$my.post('/index/user/store_follow', {
									id: _this.checkboxValue1,
									type: 2,
									is_batch: _this.checkboxValue1.length > 1 ? 1 : 0
								}).then(res => {
									uni.hideLoading()
									_this.$my.toast(res.message)
									if (res.code == 200) {
										_this.page=1;
										_this.getList();
										_this.checkboxValue1 = []
									}
								})
							}
						}
					})
				} else {
					this.$my.toast('请先选择要取消收藏的列表')
				}
			},
			activeTimeChange(id) {
				this.activeTime = id;
				this.page = 1;
				this.showTime = false;
				this.getList()
			},
			// 全选
			checkboxChange(e) {
				this.checkboxValue1 = [];
				this.list.forEach(item => {
					if (e.length > 0) {
						this.checkboxValue1.push(item.id)
					} else {
						this.checkboxValue1 = []
					}
				})
			},
			getList() {
				this.$my.get('/index/user/get_product_follow', {
					limit: 10,
					page: this.page,
					time: this.activeTime,
					keyword:this.searchValue
				}).then(res => {
					if (res.code == 200) {
						if(this.page==1){
							this.list=res.data.data
						}else{
							this.list = this.list.concat(res.data.data)
						}
					}
				})
			},
		},
		onLoad() {
			this.getList()
		},
		
		onReachBottom() {
			this.page++;
			this.getlist()
		},
	}
</script>

<style lang="scss" scoped>
	.nodeta {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	.model {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0%;
		left: 0%;
		background-color: rgba(0, 0, 0, .6);
	}

	.timelis {
		width: 30%;
		text-align: center;
		background-color: #f5f5f5;
		font-size: 24;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 8rpx;
		margin-right: 28rpx;
	}

	.timelis:nth-of-type(3) {
		margin-right: 0;
	}

	// .timelis:[2n+1]{
	// 	margin: 0 10%;
	// }
	.time {
		background-color: #fff;
	}

	.toprightBox {
		padding: 24rpx;
		box-sizing: border-box;
		width: 276rpx;
		// height:281rpx;
		// left: 216px;
		right: 32rpx;
		top: 82rpx;
		background: #fff;
		box-shadow: 0px 0px 8rpx 4rpx rgba(171, 171, 171, 0.25);
		z-index: 10;
	}

	.bottomBox {
		width: 100%;
		height: 112rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.lis {
		background-color: #fff;
		padding-bottom: 24rpx;
		// box-sizing: border-box;

		.like {
			padding: 0rpx 10rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			background-color: #f5f5f5;
		}

		.lisRight {
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			flex: 1;
			margin-left: 30rpx;
			// height: 240rpx; 
			margin-right: 38rpx;
		}
	}

	.li {
		padding: 0 52rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-bottom: 40rpx;
	}

	.active {
		background-color: $red;
		color: #fff;
		box-shadow: 0rpx 5rpx 8rpx 1rpx rgba(255, 111, 111, 0.25);
	}
</style>
